<template>
    <div class="app-container">
        <div class="query-form">
            <el-form ref="tableSearchParam" :model="tableSearchParam" label-width="50px" :inline="true">
                <el-form-item label="姓名" label-width="50px">
                    <el-input v-model="tableSearchParam.agencyName" style="width:200px" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryForm" icon="el-icon-search" size="small">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table
                :data="showList"
                style="width: 100%;margin-bottom: 20px;"
                row-key="rowKey"
                border>
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-table :data="props.row.offLineDTOList" row-key="rowKey" border>
                        <el-table-column type="expand">
                            <template slot-scope="props2">
                                <el-table :data="props2.row.offLineDTOList" row-key="rowKey" border>
                                    <el-table-column
                                            prop="agencyName"
                                            label="代理人姓名"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="userTelphone"
                                            label="手机号码"
                                            width="100">
                                    </el-table-column>
                                    <el-table-column
                                            prop="createdTime"
                                            label="创建时间">
                                    </el-table-column>
                                </el-table>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="agencyName"
                                label="代理人姓名"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="userTelphone"
                                label="手机号码"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                prop="createdTime"
                                label="创建时间"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="firstLevelCount"
                                label="一级下线数量">
                        </el-table-column>
                        <el-table-column
                                prop="secondLevelCount"
                                label="二级下线数量">
                        </el-table-column>
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column
                    prop="agencyName"
                    label="代理人姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="userTelphone"
                    label="手机号码"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="createdTime"
                    label="创建时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="firstLevelCount"
                    label="一级下线数量"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="secondLevelCount"
                    label="二级下线数量"
                    width="200">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
  import rescueAgentApi from '@/api/rescueAgentApi';
  import {formatDate} from '@/utils/dateUtil'
  export default {
    name: 'agencyInfo',
    data(){
      return{
        pageList:[],
        showList:[],
        tableSearchParam:{
          agencyName:''
        },
      }
    },
    methods:{
      listTableData() {
        rescueAgentApi.getInfoWithOffLine( (res) => {
          let rowKey = 0;
          let resList =[];
          if(res && res.length>0){
            res.forEach(item=>{
              if(item.offLineDTOList&& item.offLineDTOList.length>0){
                let firstOffLine =[];
                item.offLineDTOList.forEach(i=>{
                  if(i.offLineDTOList&& i.offLineDTOList.length>0){
                    let secondOffLine =[];
                    i.offLineDTOList.forEach(ii=>{
                      secondOffLine.push({...ii,rowKey:rowKey,createdTime:formatDate(ii.createdTime)});
                      rowKey++;
                    })
                    i.offLineDTOList = secondOffLine;
                  }
                  firstOffLine.push({...i,rowKey:rowKey,createdTime:formatDate(i.createdTime)})
                  rowKey++;
                })
                item.offLineDTOList = firstOffLine;
              }
              resList.push({...item,rowKey:rowKey,createdTime:formatDate(item.createdTime)})
              rowKey++;
            })
          }
          // console.log(resList);
          this.pageList = resList;
          this.showList = resList;
        }, () => {
        })
      },
      queryForm(){
        this.showList = this.pageList.filter(item=>{
          return item.agencyName&&item.agencyName.indexOf(this.tableSearchParam.agencyName)>-1
        })
      },
    },
    mounted() {
      this.listTableData();
    }
  }
</script>

<style scoped>

</style>
